﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface INoticeBarCellTypeParam {
        DefaultValue: any;
        ClickCommand: Forguncy.Plugin.ICustomCommandObject;
        scrollMode: "horizontal" | "vertical";
        mode: "none" | "closeable" | "link";
        leftIcon: Icon;
        delay: number;
        speed: number;
        autoplay: number;
        duration: number;
    }

    export class NoticeBarCellType extends VantCellTypeBase<INoticeBarCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;

            let template = `
<van-notice-bar
:mode="mode"
:text="text"
:color="color"
background="transparent"
:left-icon="leftIcon"
:delay="delay"
:speed="speed" 
:scrollable="scrollable"
:wrapable="wrapable"
@click="click"
/>`;
            if (cellType.scrollMode === "vertical") {
                template = `
<van-notice-bar
class="vertical-notice-bar"
:left-icon="leftIcon" 
:mode="mode"
:color="color"
background="transparent" 
@click="click"
:scrollable="false">
  <van-swipe
    vertical
    ref="vant-swipe"
    :height="swipeItemHeight"
    class="notice-swipe"
    :autoplay="autoplay"
    :duration="duration"
    :show-indicators="false"
  >
    <van-swipe-item v-for="item in items">{{item}}</van-swipe-item>
  </van-swipe>
</van-notice-bar>`;
            }

            const option = {
                el: "#" + this.uId,
                template: template,
                data() {
                    return {
                        mode: cellType.mode === "none" ? "" : cellType.mode,
                        text: "",
                        color: Forguncy.ConvertToCssColor(self.CellElement.StyleInfo.Foreground),
                        leftIcon: null,
                        delay: cellType.delay,
                        speed: cellType.speed,
                        autoplay: cellType.autoplay,
                        duration: cellType.duration,
                        scrollable: cellType.scrollMode === "horizontal",
                        wrapable: !!self.CellElement.StyleInfo.WordWrap,
                        items: [],
                        swipeItemHeight: null
                    };
                },
                methods: {
                    getValue() {
                        return this.text;
                    },
                    setValue(value) {
                        this.text = value?.toString();
                        this.items = (value?.toString() ?? "").split('\r\n');
                        if (cellType.scrollMode === "vertical") {
                            this.$nextTick(() => {
                                this.$refs["vant-swipe"].resize();
                            });
                        }
                    },
                    click() {
                        self.executeCustomCommandObject(cellType.ClickCommand, null, "Click");
                    }
                },
                mounted() {
                    self.fontDom = $(this.$el).find(".van-notice-bar__content");
                    this.swipeItemHeight = $(this.$el)[0].offsetHeight;
                },
            };

            this.createVueApp(option);

            self.recalcIcon(this.CellElement.StyleInfo.Foreground);

            super.onPageLoaded(info);
        }
        lastIconColor: string;
        public recalcIcon(forground: string) {
            if (!this.vue) {
                return;
            }
            const cellType = this.cellType;
            forground = forground ?? "#ed6a0c";
            if (cellType.leftIcon) {
                const color = cellType.leftIcon.UseCellTypeForeColor ? forground : cellType.leftIcon.Color;
                if (color !== this.lastIconColor) {
                    this.lastIconColor = color;
                    IconHelper.getIcon(<Icon>{
                        Name: cellType.leftIcon.Name,
                        BuiltIn: cellType.leftIcon.BuiltIn,
                        Color: color
                    }, icon => {
                        this.vue.leftIcon = icon;
                    });
                }
            }
        }

        public setFontStyle(styleInfo: Forguncy.Plugin.StyleMetaData) {
            if (this.vue) {
                this.vue.color = Forguncy.ConvertToCssColor(styleInfo.Foreground);
                this.vue.wrapable = !!styleInfo.WordWrap;
            }
            this.recalcIcon(styleInfo.Foreground);
            super.setFontStyle(styleInfo);
        }

        public clickable() {
            const cellType = this.cellType;
            return cellType.ClickCommand?.Commands?.length > 0;
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.NoticeBar, Vant", VantCellTypes.NoticeBarCellType);